<template>
  <div style="width: 100%; height: 800px"  id="viewer"></div>
</template>

<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { preview } from "@/api/file/index.js";
export default {
  props: {
    previewData: {
      typeof: Object,
      default: null,
    },
  },
  data() {
    return {
      imgUrl: null,
      viewer: null
    };
  },
  methods: {
    // 场景搭建
    init() {
        this.viewer = new Viewer({
            container: document.querySelector('#viewer'),
            panorama: this.imgUrl,
            navbar: true,
            touchmoveTwoFingers: true,
            caption: '360度全景图片',
            defaultLong: 0,
            defaultLat: 0,
            defaultZoomLvl: 0,
            loadingTxt: '加载中...',
            loadingImg: 'images/loading.gif'
        })
    },
    // 请求数据
    getData() {
        preview({ fileId: this.previewData.fileId })
        .then((res) => {
          this.imgUrl = res.data.url;
          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style>
</style>